import React, { useState, useRef, useEffect } from 'react'
import { styles } from '../utils'

const MyUseEffect = () => {
  const [text, changeText] = useState('不要说话')
  const [num, changeNum] = useState(100)
  const [flag, changeFlag] = useState(true)
  const textRef = useRef()

  useEffect(() => {
    console.log('组件初始化载入');
  }, [])

  useEffect(() => {
    console.log('text');
  }, [text])
  // 不写 [] 任何数据改变 此函数都会执行
  // 写 [] 任何数据改变 此函数仅执行一次
  // [] 内写入变量 仅在此变量改变时 函数执行

  return (
    <div>
      <div style={styles.box}>
        {
          flag ?
            <div>
              <h2>useEffect - useEffect</h2>
              <h3>text = {text}</h3>
              <h3>num = {num}</h3>
            </div>
            :
            <div><h2>404</h2></div>
        }
        <hr />
        <div>
          <input type="text" className="input" placeholder="Type something here...." ref={textRef} onChange={() => changeText(textRef.current.value)} value={text} />
        </div>
        <button className='learn-more' onClick={() => changeNum(num + 1)}>num add</button>
        <button className='learn-more' onClick={() => changeFlag(!flag)}>change flag</button>
      </div>
    </div>
  )
}

export default MyUseEffect
